<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-02-20 18:49:26
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-02-20 21:09:35
 * @FilePath: \搜索栏\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .main {
          
            margin: 0 auto;
            width: 600px;
        }
    </style>
</head>

<body>
    <div class="main">
        <input type="text">
        <p></p>
    </div>


    <script src="message.js">
    </script>
    <script>
        const input = document.querySelector('input')
        const main = document.querySelector('.main')
        let p = document.querySelectorAll('p')
        input.addEventListener('input', (e) => {
            p.forEach(item => main.removeChild(item))
            const city = list.filter((item) => {
                console.log(e.target.value)
                return item.city.toLowerCase().includes(e.target.value) || item.state.includes(e.target.value)
            }).sort((a,b) => {
                return b.population - a.population
            })
            console.log(city)
            for (let i = 0; i < city.length; i++) {
                const p = document.createElement('p')
                p.innerText = `${city[i].city} | ${city[i].state}  ${city[i].population}`
                main.appendChild(p)
            }
            p = document.querySelectorAll('p')
        })
    </script>
</body>

</html>